import React,{Component} from 'react'
import Pages from '../Pages'
import {Link,browserHistory} from 'react-router'
import {Spin,message,Button} from 'antd'
//import Switch, {Case,Default} from 'react-switch-case';
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import Layer from '../Layer';
class CourseManage extends Component {
	constructor(args) {
		super()
		this.state = {
			courseList : pub.getObject(0),
			tab : 0,
			loading : false,
			totalPage : 0 ,
			checkState: '' ,
			courseType : '',
			jumpPage:1,
			courseName:'',
			branchOfficeCode:'',
			courseTypeList:[],
			deleteCourseId:'',
			showLayer:false
		}
	}
	getToodType(){
		fetch.goodType({pid:2}).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					courseTypeList: data.categoriesList?data.categoriesList:[],
					loading:false
				})
			} else {
				message.error(data.errMsg, 3);
				this.setState({
					courseTypeList:[]
				})
			}
		}, (res) => {
			this.setState({
					courseTypeList:[]
		   })
			pub.reject(res);
		})
	}
	// selectChnnelByUserCode(){
	// 	fetch.selectChnnelByUserCode({userCode:JSON.parse(localStorage.getItem('user')).userCode}).then((data)=>{
    //                this.setState({
	// 		         branchOfficeCode:data.userDetail.branchOfficeCode?data.userDetail.branchOfficeCode:''  
	// 		    })
	// 	},(res)=>{
	// 		pub.reject(res);
	// 	})
	// }
	componentWillMount() {
		this.setState({
			branchOfficeCode:pub.user.manageCom
		})
		// this.selectChnnelByUserCode();
		this.show();
		this.getToodType();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},()=>{
			this.show();
		})
	}
	show() {
		pub.loading(this, true);
		fetch.adminGetCourse(this.state.jumpPage, this.state.checkState, this.state.courseType, this.state.courseName).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					courseList: data.coursePage.pageItems || [],
					totalPage: data.coursePage.totalPage
				})
			} else {
				message.error(data.errMsg, 3);
				this.setState({
					courseList:[],
					totalPage:0
				})
			}
			pub.loading(this, false);
		}, (res) => {
			pub.loading(this, false);
			pub.reject(res);
			this.setState({
					courseList:[],
					totalPage:0
				})
		})
	}
	set(id) {
		fetch.setGoodCourse({
			courseId: id
		}).then((data) => {
			if (data.result === 'RC100') {
				this.show();
			} else {
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
		})
	}
	deleteManCourse(courseId,courseState){
		pub.loading(this,true);
		fetch.deleteManCourse({courseId,courseState}).then((data) => {
			if (data.result === 'RC100') {
				this.show();
				this.setState({
				showLayer:false,
				deleteCourseId:''
		       })
			} else {
				message.error(data.errMsg, 3);
			    this.setState({
				showLayer:false,
				deleteCourseId:''
		       })
			}
			pub.loading(this,false);
		}, (res) => {
			pub.reject(res);
			this.setState({
				showLayer:false,
				deleteCourseId:''
		       })
		})
		pub.loading(this,false);
	}
	deleteCourseId(id){
		this.setState({
			showLayer:true,
			deleteCourseId:id
		})
	}
	deleteCourseIdhideModel(){
		this.setState({
			showLayer:false
		})
	}
	clickCourse(course,type){
		if(course.courseConvert===1){
            message.warning('视频上传中，请稍后再试...', 1);
			this.show();
		}else if(course.courseConvert===2){
			message.warning('视频上传失败，请联系管理员...', 1);
			this.show();
		}else{
			if(type===1){
				pub.jumpHistory.push(`/admin/CourseDetail/${course.courseId}`)
			}else if(type===2){
                pub.jumpHistory.push(`/admin/CourseExamine/${course.courseId}`) 
			}else{
				pub.jumpHistory.push(`/admin/EditCourse/${course.courseId}`) 
			}
		}
	}
	render() {
		return (
			<div className="container">
			  	<div className="common-title">课程管理
					<div className="filter-search floatR">
						<input type="text" value={this.state.courseName} onChange={(e)=>{this.setState({courseName:e.target.value.replace(/[@#%&{}?￥/><[()（）【】{}《》''“‘”’.....]+/g,'')})}} placeholder="搜索"/>
						<a className="btn search-btn" onClick={()=>this.show()} ><i className="icon-search"></i></a>
					</div>
				</div>
				<div className="row select-filter clearFix">
					<div className="floatL">
						<select value={this.state.checkState} onChange={(e)=>{this.setState({checkState:e.target.value},()=>{this.show();})}}>
							<option value=''>全部状态</option>
							<option value='1'>预审</option>
							<option value='2'>未通过</option>
							<option value='3'>审核中</option>
							<option value='5'>终审</option>
							<option value='U'>下架</option>
						</select>
					</div>
					<div className="floatL">
						<select value={this.state.courseType} onChange={(e)=>{this.setState({courseType:e.target.value},()=>{this.show();})}}>
						   <option value=''>全部分类</option>
					     	{this.state.courseTypeList.map((item,index)=>{
					     		return(
					     			<option key={index} value={item.code}>{item.name}</option>
					     			)
					     	})}
						</select>
					</div>
				</div>
				<div className="row pad-t-20">
				    <div className="table bg-FFFFFF box-shadow">
				    <Spin spinning={this.state.loading} tip="加载列表中...">
				        <ul className="table-td" style={{minHeight:'486px'}}>
				        {this.state.courseList.map((course,index)=>{
				        	return(
					                <li key={index}>
					                	<div className="info">
					                		<div className="img">
											
					                		 <Link onClick={()=>this.clickCourse(course,1)}>   
											 {/*<video src={pub.getFile(course.coursevideoPath)}  
											 					                             width="100%" 
											 					                             height="100%"
											 					                             >
											 					        	                 您的浏览器不支持 video 标签。
											 					                        </video>*/}
					                        <img alt='test' className="v-img" src={require("../../style/images/test.png")}/>
											   <div className="play"><i className="icon-play"></i></div>
											   </Link>
										
					                		</div>
											
					                		<div className="info-txt">
					                			<h3>{pub.subString(course.courseName,20)}</h3>
					                			<p>{course.userRealName}</p>
					                			<p className='shorthand' style={{fontWeight:"normal"}}>{course.courseDesc.length>60?course.courseDesc.substr(0,60)+'...':course.courseDesc}</p>
					                			<span>{pub.formatTimestamp(course.createTime)}</span>
					                		</div>
					                	</div>
								{(()=>{
									switch (course.checkState){
										case '1':
										return(
											<div className="operate1">
												{/*<Link className="btn btn-blue" style={{marginLeft:'-58px'}} to={`/admin/CourseExamine/${course.courseId}`}>审核</Link>
												 <span className="">预审
													<div onClick={()=>this.set(course.courseId)} className={"jing"+(course.goodCourse==='1'?' active':'')}></div>:null
								      	         </span>*/}
												<span className="blue">预审</span>
												<div className="operate-btn">
												{
														 this.state.branchOfficeCode.length===1?
														 <Link onClick={()=>this.clickCourse(course,2)} className="blue">审核</Link>:null
												}
												</div>
								      	        
											</div>
										);
										case '2' :
										return(
											<div className="operate1"><span className="red">未通过</span>
											<div className="operate-btn">
											</div>
											</div>
										);
										case '3' :
										return(
											<div className="operate1">
								      	   		<span className="blue">审核中</span>
												<div className="operate-btn">
								      	   		<Link onClick={()=>this.clickCourse(course,2)} className="blue">审核</Link>
												</div>
								      	   	</div>
										);
										case '5' :
										return(
											<div className="operate1"><span className="">终审
												<div className="operate-btn">
												{course.courseState==='A'&&(JSON.parse(localStorage.getItem('user')).manageCom).length===1?<Link onClick={()=>this.clickCourse(course,3)} className="blue-1">编辑</Link>:null}
												{course.courseState==='U'&&(JSON.parse(localStorage.getItem('user')).manageCom).length===1?<a className="blue-1" onClick={()=>this.deleteManCourse(course.courseId,'A')}>上架</a>:null}
												{course.courseState==='A'&&(JSON.parse(localStorage.getItem('user')).manageCom).length===1?<a className="blue-1" onClick={()=>this.deleteManCourse(course.courseId,'U')}>下架</a>:null}
											    {(JSON.parse(localStorage.getItem('user')).manageCom).length===1?<a className="blue-1" onClick={()=>this.deleteCourseId(course.courseId)}>删除</a>:null}
												</div>
									      	   	{
													course.courseState!=='U'&&this.state.branchOfficeCode.length===1?
													<div onClick={()=>this.set(course.courseId)} className={"jing"+(course.goodCourse==='1'?' active':'')}></div>:null
											   	}
									      	</span></div>
										);
										default :
										return(
											<div className="operate1"><span className="red">Error</span></div>
										);
									}
								})()}
						    
					                </li>
				        		)
				        })}
				        </ul>
				         </Spin>
				  </div>

			    <Layer 
						title = ""
						show={this.state.showLayer} 
						hide={this.deleteCourseIdhideModel.bind(this)}
						width="300px"
						height="150px"
					>
					    <div className="row">
							<div className="pop-box-1">																					
								<p>你确定要删除吗？确定后将不能恢复！</p>										
							</div>
									<div className="pop-btn" style={{padding:'7px 0'}}>
										<Button loading={this.state.loading} onClick={()=>this.deleteCourseIdhideModel()} className="btn btn-blue">取消</Button>
										<Button loading={this.state.loading} className="btn btn-blue" onClick={()=>{this.deleteManCourse(this.state.deleteCourseId,'D')}}>确认</Button>
									</div>
						</div>
			        </Layer>

				<div className="line"></div>
				<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
				</div>
			</div>

		)
	}

}
export default CourseManage

